<script setup>

</script>

<template>
  <div class="box-container">

    <div class="up-picture">
      <img src="../../public/1.png">
      <img class="biaoshi" src="../../public/2.png">
    </div>

    <div class="detail-content">
      <div class="title">
        Think PHP 5.0 博客系统实战项目演练
      </div>

      <div class="zhuantai">
        <span class="title-type">高级</span>
        <span class="info">1125人在学习</span>
      </div>


    </div>


  </div>


</template>

<style scoped>

.box-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.up-picture {
  width: 100%;

  .biaoshi {
    position: absolute;
    top: 10px;
    right: -30px;
  }
}


.detail-content {

  .title {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bolder;
  }



    .title-type {
      color: darkorange;
      font-size: 18px;
      font-width: bold;
      margin-left: 20px;
    }

    .info {
      margin-left: 20px;
      margin-top: 20px;
      font-size: 18px;
    }



}


</style>
